<h3>简单导航条</h3>
<p>简单导航条并没用添加过多的样式。便于进行定制。</p>
<div spellcheck="false" class="example" contenteditable="true">
  <nav class="navbar" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
      data-target="#bs-example-navbar-collapse-1"><span class="sr-only">Toggle
      navigation</span></button> <a class="navbar-brand" href="#">Brand</a>
    </div><!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-collapse-example">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle=
          "dropdown">Dropdown</a>
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="#">Action</a>
            </li>
            <li>
              <a href="#">Another action</a>
            </li>
            <li>
              <a href="#">Something else here</a>
            </li>
            <li>
              <a href="#">Separated link</a>
            </li>
            <li>
              <a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div><button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle=
          "dropdown">Dropdown</a>
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="#">Action</a>
            </li>
            <li>
              <a href="#">Another action</a>
            </li>
            <li>
              <a href="#">Something else here</a>
            </li>
            <li>
              <a href="#">Separated link</a>
            </li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </nav>
</div>
<h3>默认导航条</h3>
<p><code>.navbar-default</code></p>
<div spellcheck="false" class="example" contenteditable="true">
  <nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
      data-target="#bs-example-navbar-collapse-1"><span class="sr-only">Toggle
      navigation</span></button> <a class="navbar-brand" href="#">Brand</a>
    </div><!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-collapse-example">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle=
          "dropdown">Dropdown</a>
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="#">Action</a>
            </li>
            <li>
              <a href="#">Another action</a>
            </li>
            <li>
              <a href="#">Something else here</a>
            </li>
            <li>
              <a href="#">Separated link</a>
            </li>
            <li>
              <a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </nav>
</div>
<h3>深色导航条</h3>
<p><code>.navbar-inverse</code></p>
<div spellcheck="false" class="example" contenteditable="true">
  <nav class="navbar navbar-inverse" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
      data-target="#bs-example-navbar-collapse-1"><span class="sr-only">Toggle
      navigation</span></button> <a class="navbar-brand" href="#">Brand</a>
    </div><!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-collapse-example">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle=
          "dropdown">Dropdown</a>
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="#">Action</a>
            </li>
            <li>
              <a href="#">Another action</a>
            </li>
            <li>
              <a href="#">Something else here</a>
            </li>
            <li>
              <a href="#">Separated link</a>
            </li>
            <li>
              <a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </nav>
</div>
<h3>使用表单元素</h3>
<div spellcheck="false" class="example" contenteditable="true">
  <nav class="navbar navbar-inverse" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
      data-target="#bs-example-navbar-collapse-1"><span class="sr-only">Toggle
      navigation</span></button> <a class="navbar-brand" href="#">Brand</a>
    </div><!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-collapse-example">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle=
          "dropdown">Dropdown</a>
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="#">Action</a>
            </li>
            <li>
              <a href="#">Another action</a>
            </li>
            <li>
              <a href="#">Something else here</a>
            </li>
            <li>
              <a href="#">Separated link</a>
            </li>
            <li>
              <a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div><button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </nav>
</div>
<h3>将内容放置与导航右侧</h3>
<div spellcheck="false" class="example" contenteditable="true">
  <nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
      data-target="#bs-example-navbar-collapse-1"><span class="sr-only">Toggle
      navigation</span></button> <a class="navbar-brand" href="#">Brand</a>
    </div><!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-collapse-example">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle=
          "dropdown">Dropdown</a>
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="#">Action</a>
            </li>
            <li>
              <a href="#">Another action</a>
            </li>
            <li>
              <a href="#">Something else here</a>
            </li>
            <li>
              <a href="#">Separated link</a>
            </li>
            <li>
              <a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle=
          "dropdown">Dropdown</a>
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="#">Action</a>
            </li>
            <li>
              <a href="#">Another action</a>
            </li>
            <li>
              <a href="#">Something else here</a>
            </li>
            <li>
              <a href="#">Separated link</a>
            </li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </nav>
</div>
<h3>自适应宽度</h3>
<p>在<code>.nav</code>上添加<code>.nav-justified</code>。</p>
<div spellcheck="false" class="example" contenteditable="true">
  <nav class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav nav-justified">
      <li class="cat-item nav-system-home">
        <a href="/">首页</a>
      </li>
      <li class="cat-item nav-custom-">
        <a href="">演示</a>
      </li>
      <li class="cat-item nav-article-1 active">
        <a href="/download.html">下载</a>
      </li>
      <li class="cat-item nav-custom-">
        <a href="http://www.chanzhi.net" target="_blank">云蝉知</a>
      </li>
      <li class="cat-item nav-system-help">
        <a href="/help/">帮助</a>
      </li>
      <li class="cat-item nav-custom-">
        <a href="http://www.chanzhi.org/vip/25_vip-support.html">支持</a>
      </li>
      <li class="cat-item nav-system-forum">
        <a href="/forum/">论坛</a>
      </li>
      <li class="cat-item nav-article-2 active">
        <a href="/dynamic.html">动态</a>
      </li>
      <li class="cat-item nav-custom-">
        <a href="">团队</a>
      </li>
    </ul>
  </nav>
</div>
